接近性Proximity / 分組Grouping / 對映Mapping(原則)
接近性 Proximity
/189.jpg)
晚餐時間到了,你穿上夏威夷襯衫,離開浴室,關掉燈。然後你在臥室開啟燈。浴室、走廊和臥室的燈開關都各自位於相應的房間內。
這體現了“接近性”原則:控制裝置與其影響物件的距離越近,操作越方便,符合人體工程學,且直觀。
/190.jpg)
/191.jpg)
/192.jpg)
接近性在表達控制裝置之間的關係時也很有用。如果你看到牆上有一組開關,並且知道其中一個控制燈光,那麼你很自然地會假設其他開關也控制燈光。
/194.jpg)
/195.jpg)
讓我們來看幾個例子,看看如何使用接近性和分組來構建設計,並建立控制裝置與它們影響的物件或檢視之間的關係。在Keynote中,接近性幫助我們將檢視選單與幻燈片導航器和畫布區域聯絡起來代表它所影響的物件。
/201.jpg)
物件建立工具放置在畫布的正上方,因為這些物件就是在畫布上顯示。
/202.jpg)
動畫、格式和文件可見性開關位於這些面板顯示的正上方。
/203.jpg)
分組Grouping
/199.jpg)
接近性也幫助表達控制裝置之間的關係。例如,牆上的一組開關如果大多控制燈光,人們會自然地假設其他開關也控制燈光。如果一個開關控制窗簾,最好分開設定,以便記住哪個開關控制什麼。
/196.jpg)
/197.jpg)
/198.jpg)
這種安排方式稱為“分組”,幫助理解元素關係,並賦予設計結構。然而,許多應用未充分利用分組,導致混亂。
在Sketch中,你可以看到分組是如何將相關的控制工具聚集在一起的,比如分組控制、變換和編輯工具、路徑查詢操作和圖層排序操作。介面越大,接近性和分組的需求就越高,但這些原則對較小的螢幕仍然至關重要,比如iPad、iPhone,甚至是Apple Watch。
/205.jpg)
/207.jpg)
對映 Mapping
/212.jpg)
“對映”指控制裝置與其影響物件的相似性。比如,窗簾的上下移動應使用對應的上下開關。控制裝置的排列順序也應與受控物件的佈局一致,這樣設計更直觀。
/213.jpg)
/214.jpg)
對映涉及控制裝置的排列方式。開關的順序應與受控物件的佈局一致。例如,若開關控制臥室的三組天花板燈,良好的對映設計會使開關的排列與燈的佈局相對應,使操作更直觀。
/217.jpg)
/218.jpg)
如果對映不清晰,常常需要標籤解釋功能,但標籤不利於使用者記住操作。
/220.jpg)
最好的對映是直接的對映,讓使用者能直接操作物件,如macOS的指標操作或iOS的手勢操作,都體現了這一點。